import React, { useState } from 'react'
import './style.less'
import { Flex, Form } from 'antd'
import { message, usePage } from '@hs-admin/utils'
import { HsAdminTablePage, HsAdminForm, HsAdminSpin, HsAdminInput } from '@hs-admin/base-components'
import { QualificationTypeList } from '@/utils/type'
import { HsAdminSelectDomain } from '@hs-admin/components'
import { getCompanyQualificationsList, updateCompanyQualifications } from '@/api/company'
import { CheckCircleOutlined, CloseCircleOutlined, EditOutlined } from '@ant-design/icons'

const OperationIndustryAtlas: React.FC = () => {
  const { pagination, resetPage }: { pagination: UsePageProps; resetPage: () => void } = usePage(callList)
  const [keywords, setkeywords] = useState(undefined)

  // 搜索和重置都会执行
  const handleSearch = () => {
    resetPage()
  }
  const [form] = Form.useForm()
  const formItemOptions = [
    {
      name: 'keywords',
      FormItemColProps: {
        span: 6
      },
      slot: 'keywords'
    },
    {
      label: '资质级别',
      name: 'qualified_level',
      component: 'Select',
      componentProps: {
        options: QualificationTypeList(),
        onChange: handleSearch
      },
      FormItemColProps: {
        span: 6
      }
    }
  ]
  const [data, setData] = useState<any[]>([])
  const [loading, setloading] = useState(true)

  const columns = [
    {
      title: '排序权重',
      dataIndex: 'weight',
      render: (text: number, record: { edit: boolean; weight: any; oldWeight: any; enabled: any; id: any }) => (
        <>
          {!record.edit && (
            <Flex align="center" gap={'middle'}>
              <p>{text}</p>
              <EditOutlined
                onClick={() => {
                  record.edit = true
                  setData([...data])
                }}
              />
            </Flex>
          )}
          {record.edit && (
            <Flex align="center" gap={'middle'}>
              <HsAdminInput
                value={record.weight}
                type="number"
                onChange={(e: { target: { value: any } }) => {
                  record.oldWeight = record.weight
                  record.weight = e.target.value
                  setData([...data])
                }}
                onPressEnter={(e: { target: { value: any } }) => {
                  updateCompanyQualifications({
                    weight: e.target.value,
                    enabled: record.enabled,
                    id: record.id
                  }).then(() => {
                    message.success('排序权重编辑成功')
                    callList()
                  })
                }}
              />
              <CloseCircleOutlined
                onClick={() => {
                  // record.weight = record.oldWeight
                  record.edit = false
                  setData([...data])
                }}
              />
              <CheckCircleOutlined
                onClick={() => {
                  updateCompanyQualifications({
                    weight: record.weight,
                    enabled: record.enabled,
                    id: record.id
                  }).then(() => {
                    message.success('排序权重编辑成功')
                    callList()
                  })
                }}
              />
            </Flex>
          )}
        </>
      )
    },
    {
      title: '资质名称',
      dataIndex: 'qualified_name'
    },
    {
      title: '资质级别',
      dataIndex: 'qualified_level'
    },
    {
      title: '是否开放',
      dataIndex: 'enabled',
      render: (text: boolean, record: { weight: any; enabled: any; id: string }) => (
        <>
          {text ? (
            <CheckCircleOutlined
              className="text-#52c41a cursor-pointer"
              onClick={() => {
                updateCompanyQualifications({
                  weight: record.weight,
                  enabled: !record.enabled,
                  id: record.id
                }).then(() => {
                  message.success('切换成功')
                  callList()
                })
              }}
            />
          ) : (
            <CloseCircleOutlined
              className="text-#ff4d4f cursor-pointer"
              onClick={() => {
                updateCompanyQualifications({
                  weight: record.weight,
                  enabled: !record.enabled,
                  id: record.id
                }).then(() => {
                  message.success('切换成功')
                  callList()
                })
              }}
            />
          )}
        </>
      )
    }
  ]

  // 列表查询事件
  async function callList() {
    setloading(true)
    const fieldsValue = form.getFieldsValue()
    const params = {
      page: pagination.current,
      page_size: pagination.pageSize,
      ...fieldsValue,
      keywords
    }
    const res = await getCompanyQualificationsList(params)
    const tableData = res.items ?? []
    setData(tableData)
    setloading(false)
    return res
  }

  return (
    <div className="operation-company-rank-page-wrapper">
      {loading && <HsAdminSpin />}
      <HsAdminForm form={form} formItemOptions={formItemOptions} labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
        <div slot="domain_id">
          <HsAdminSelectDomain placeholder="请选择所属领域" onChange={handleSearch} />
        </div>
        <div slot="keywords">
          <HsAdminInput
            Search
            placeholder="请输入搜索内容"
            enterButton="搜索"
            onSearch={(value: React.SetStateAction<undefined>) => {
              setkeywords(value)
              handleSearch()
            }}
          />
        </div>
      </HsAdminForm>
      <HsAdminTablePage columns={columns} rowKey="id" dataSource={data} pagination={pagination} size="small"></HsAdminTablePage>
    </div>
  )
}

export default OperationIndustryAtlas
